<template>
  <div class="bigBrother">
    <TodoHeader :receiver='receiver'></TodoHeader>

    <TodoList
        :todos="todos"
        :changeChecked="changeChecked"
        :deleteItem="deleteItem"
    />

    <TodoFooter
        :todos="todos"
        :checkAllTodo="checkAllTodo"
    />

  </div>

</template>

<script>
//导入组件
import TodoHeader from "./components/TodoHeader.vue";
import TodoList from "./components/TodoList.vue";
import TodoFooter from "./components/TodoFooter.vue";

export default {
  name: 'App',
  components: {
    TodoHeader,
    TodoList,
    TodoFooter
  },
  data() {
    return {
      todos: JSON.parse(localStorage.getItem('todos')) || []
    }
  },
  methods: {
    // 子给父穿数据，给调用父的方法
    receiver(todoObj) {
      console.log('i receiver data: ' + todoObj)
      this.todos.unshift(todoObj)
    },
    changeChecked(v) {
      this.todos.forEach((todo) => {
        if (todo.id === v) {
          todo.done = !todo.done
        }
      })
    },
    deleteItem(v) {
      this.todos = this.todos.filter(todo => v !== todo.id);
    },
    checkAllTodo(done) {
      console.log(done)
      if (done) {
        this.todos.forEach(x => x.done = true);
      } else {
        this.todos.forEach(x => x.done = false);
      }
    },
  },
  watch: {
    todos: {
      // 开启深度监测
      deep: true,
      handler(value) {
        localStorage.setItem('todos', JSON.stringify(value))
      },
    },
  }
}
</script>

<style lang="less">
.bigBrother {
  text-align: center;
}
</style>
